<script setup lang="ts">
import useStore from "@/store";
import router from "@/router";
import * as echarts from "echarts";
import { onMounted } from "vue";
//进入到script里组件开始渲染

import request from "@/utils/request";
// 这是一个导出api
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const getError = () => request({ url: "/api/getErrorInfo", method: "get" });
  var values1:number = 80; // 仪表盘的value
  var state : string = '状态极好' //仪表盘的提示文字
  getError().then((res: any) => {
    console.log("请求的错误", res.data); 
    document.getElementById('top').innerText = '今日异常:' + res.data.length
    document.getElementById('con').innerText = res.data[1].path+ '\n'+res.data[1].message ;
    
  }); 

  var x_data : string[]= ['1','2','3','1','2','3','1','2','3','1','2','3','1','2','3','1','2','3','1','2','3','1','2','3'];
  var y_data : number[] = [1,2,3,1,2,3,1,2,3,1,2,3,1,2,3,1,2,3,1,2,3,1,2,3];
    

  var myChart1 = echarts.init((document as any).getElementById("main-circle"));
  var myChart2 = echarts.init((document as any).getElementById("main-bar"));
  var myChart3 = echarts.init((document as any).getElementById("main-pie"));
  // 绘制图表
  var opt1 = {
  series: [
    {
      type: 'gauge',
      startAngle: 0,
      endAngle: 360,
      min: 0,
      max: 100,
      splitNumber:10  ,
      itemStyle: {
        color: '#58D9F9',
        shadowColor: 'rgba(0,138,255,0.45)',
        shadowBlur: 10,
        shadowOffsetX: 12,
        shadowOffsetY: 2
      },
      progress: {
        show: true,
        roundCap: true,
        width: 18
      },
      pointer: {       
        show:false,
      
        width: 16,
        offsetCenter: [0, '5%']
      },
      axisLine: {
        roundCap: true,
        lineStyle: {
          width: 18
        }
      },
      axisTick: {
        splitNumber: 2,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      splitLine: {
        length: 1,
        lineStyle: {
          width: 3,
          color: '#999'
        }
      },
      axisLabel: {
        distance: 30,
        color: '#999',
        fontSize: 15
      },
      title: {
        show: false
      },
      detail: {
        
        backgroundColor: '#fff',
        borderColor: '#999',
        fontSize : 22,
        width: '80%',
        lineHeight: 40,
        height: 40,
        borderRadius: 8,
        offsetCenter: [0, '-5%'],
        valueAnimation: true,
        formatter: function (value) {
          return value.toFixed(0) + '\n' + state;
        },
        rich: {
          value: {
            fontSize: 50,
            fontWeight: 'bolder',
            color: '#777'
          },
          unit: {
            fontSize: 210,
            color: '#999',
            padding: [0, 0, -20, 10]
          }
        }
      },
      data: [
        {
          value: values1
        }
      ]
    }
  ]
};

  var opt2 =  {
  xAxis: {
    type: 'category',
    data: x_data
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: y_data,
      type: 'bar'
    }
  ]
};

  var opt3   = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '10%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '60%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        
        { value: 484, name: '接口请求失败' },
        { value: 300, name: '静态资源加载失败' }
      ]
    }
  ]
};

  myChart1.setOption(opt1);
  myChart2.setOption(opt2);
  myChart3.setOption(opt3);
  //onMounted DOM渲染用户已经可以看到渲染完成的页面
});

const store = useStore();



</script>

<template>
    
    <div id = 'wrap'>
      <div id="top">  </div>
      <div id="main">
        <div id="main-circle"></div>
        <div id="main-bar"></div>
        <div id="main-pie"></div>
      </div>
        <footer>
          <div id="con"></div>
        </footer>
    </div>
    
</template>
<style scoped>
#top{
  line-height: 29px;
  margin-top: 30px;
  font-size:22px;
  width: 100%;
  height: 23px;
  color: #3f3f3f;
}
#main{
  height: 100%;
  width: 100%;
  display: flex;
}
#main-circle{
  width: 350px;
  height:400px;
  float: left;
}
#main-bar{
  height: 300px;
  width: 520px;
  float: left;
  margin-top: 60px;
  transform: translate(25px,0);
}
#main-pie{
  transform: translate(15px,0);
  width: 350px;
  height:450px;
  float: left ;
} 
#con{
  display: flex; 
  width: 100%;
  height: 90px;
  justify-content: center;
  align-items: center;
}
footer{  
  justify-content: center;
  align-items: center;
  margin-top: -120px; 
  display: flex;  
}
</style>
